<template>
	<div>
		<el-row type="flex" class="row-bg" justify="center">
			<el-col :span="6">
				<el-input v-model="value" placeholder="请输入内容" @change="onSearch"></el-input>
			</el-col>
			<el-col :span="4">
				<el-button type="primary" icon="el-icon-search" @click="onSearch">搜索歌曲</el-button>
			</el-col>
		</el-row>
		<el-carousel :interval="4000" type="card" height="300px">
			<el-carousel-item v-for="(item,index) in bannerImageData" :key="index">
				<img :src="item.pic" alt="">
			</el-carousel-item>
		</el-carousel>
		<el-row>
			<el-col :span="4" v-for="(val, index) in newsongData" :key="index" :offset="index > 0 ? 1 : 0">
				<el-card :body-style="{ padding: '0px' }">
					<div @click="childMethod(val)">
						<img :src="val.picUrl" class="image">
						<div style="padding: 14px;">
							<span>{{val.name}}</span>
							<div class="bottom clearfix">
								<time class="time" v-for="(val1, index1) in val.song.artists"
									:key="index1">{{ val1.name }}
									{{index1 < val.song.artists.length - 1 ? '、' : ''}}</time>
								<!-- <el-button type="text" class="button">操作按钮</el-button> -->
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: 'findsong',
		data() {
			return {
				value: "这世界那么多人",
				//图片轮播数据
				bannerImageData: null,
				//新音乐数据
				newsongData: []
			};
		},
		created() {
			this.getimageData();
			this.getnewsongData();
		},
		methods: {
			//获取图片轮播数据
			async getimageData() {
				let {
					data: ret
				} = await this.$http.get('/banner?type=1')
				//console.log(ret)
				this.bannerImageData = ret.banners;
			},
			//获取新音乐数据
			async getnewsongData() {
				let {
					data: ret
				} = await this.$http.get('/personalized/newsong?type=1&limit=5')
				//console.log(ret)
				this.newsongData = ret.result;
			},

			childMethod(val) {
				this.$emit('childMethod', val);
			},
			onSearch() {
				this.$router.push({
					path: "/findsongsearch",
					query: {
						keywords: this.value
					},
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.row-bg {
		margin-bottom: 40px;
	}

	.el-carousel__item img {
		width: 100%;
		height: 100%;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: right;
	}

	.image {
		width: 100%;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}
</style>
